﻿@{
    Layout = "~/Views/Shared/_Blank.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Home</title>
</head>
<body>
    <header>
        Header
    </header>
    <div id="body" class="body">
        <div class="left">
            left

             <input type="button" onclick="openTab($('#hrefLogin').attr('href'), 'test');" value="add tab" />
        </div>
        <div class="spliter"></div>

        <div class="right">
            <div id="tabs" class="bodytabs">
                <ul id="ulTab">
                    <li><a href="#tabs-1" style="padding-right: 1em;">Home</a></li>

                </ul>
                <div id="tabs-1">
                    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
                    <select class="combox" id="ddlTest" style="width: 160px;">
                        <option value="1">T1</option>
                        <option value="2">T2</option>
                        <option value="3">aT1</option>
                        <option value="4">bT2</option>
                    </select>
                    
                </div>
            </div>


        </div>


    </div>
    <footer class="footer">
        <p>&copy; @DateTime.Now.Year - 我的 ASP.NET MVC 应用程序</p>
    </footer>

    <a id="closeImg" href="~/Content/widgets/icons/close.png" style="display: none;"></a>
    <a id="hrefLogin" href="~/account/login" style="display: none;"></a>
    
</body>
</html>


<script>
    //#region   Tabs

    $(function () {
        $.ajaxSetup({ cache: false });
        initTabs();
    });

    function initTabs() {
        $("#tabs li a[href]").each(function () {
            $(this).attr("data-url", $(this).attr("href"));
        })
        $("#tabs").tabs({
            cache: true,

            beforeLoad: function (event, ui) {
                ui.jqXHR.error(function () {
                    ui.panel.html(
                      "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                      "If this wouldn't be a demo.");
                });
            }
        });
        $("#ulTab img").unbind("click");
        $("#ulTab img").click(function () {
            if (confirm("Do you want to close this tab?")) {
                var a = $(this).parent();
                $(a.attr("href")).remove();
                a.parent().remove();
                $('#ulTab li a').first().click();
                return false;

            }
            return false;
        });

        $(".ui-tabs-panel").css("top", $('#ulTab').height());
    }
    var t = 0;
    function openTab(url, title) {
        url += "?" + t;
        t++;
        var tabA = $("#tabs li a[data-url='" + url + "']");


        if (tabA.size() == 0) {
            //Create New Tab
            var count = $('#tabs li').size();
            var a = $("<a></a>").attr("href", url).attr("data-index", count)
                .append('<span class="title">' + title + '</span><img src="' + $("#closeImg").attr("href") + '" data-index="' + count + '" /> ');
            //alert(a[0]
            var html = $("<li class='ui-state-default ui-corner-top'></li>").append(a);
            $('#ulTab').append(html);
            $('#ulTab').tabs("destroy");
            initTabs();
            a.click(function () {
                $("#ulTab li img").css("visibility", "hidden");
                $(this).find("img").css("visibility", "visible");
            })
            a.click();
        } else {;
            tabA.click();
        }
    }

    //#endregion Tabs end

    //#region ComboBox
    $(function () {
        $("select.combox").each(function () {
            var select = $(this);
            
            select.attr("size", 10);
            var id = this.id;
            var width = $(this).width();
            select.width(width - 2);
            var icon = $("#divIcons .down").clone();
            var combox = $(this).wrap("<div class='combox' style='width:"+width+"px'></div>");
            var wrap = $("<div class='wrap'></div>");
            wrap.insertBefore(this);
            var input = $("<input id='txt" + id + "' type='text' style='width:" + (width - 23) + "px'/>");
            wrap.append(input);
            input.val(select.find("option:selected").text());
            var down = $("<span class=down></down>");
            wrap.append(down);
            $(this).hide();
            down.click(function () { 
                select.show();
                select.focus();
            });
            select.change(function () {
                //input.val(select.find("option:selected").text());
            })
            select.click(function () {
                input.val(select.find("option:selected").text());
                select.hide();
            })
            select.keyup(function (e) {
                if (e.keyCode == 13) {
                    input.val(select.find("option:selected").text());
                    select.hide();
                }
            })

            input.keyup(function (e) {
                if (e.keyCode == 13) {
                    //Enter
                    input.val(select.find("option:selected").text());
                    select.hide();
                } else if (e.keyCode == 38) {
                    //up
                    select.show();
                    select.focus();
                    if (select[0].selectedIndex > 0)
                        select[0].selectedIndex--;
                } else if ( e.keyCode == 40) {
                    select.show();
                    select.focus();
                    if (select[0].selectedIndex < select.find("option").size())
                        select[0].selectedIndex++;
                    else
                        select[0].selectedIndex = 0;
                } else { 
                    select.show();
                    var isGot = false;
                    select.find("option").each(function () {
                        if (this.text.toLowerCase().indexOf(input.val().toLowerCase()) == 0) {
                            this.selected = true;
                            isGot = true;
                            return false;
                        }
                    });
                    if (isGot == false) {
                        $.get(select.attr("data-url"), { term: input.val() }, function (data) {
                            alert(data);
                        });
                    }
                }
            })

            input.change(function (e) {
                if ($.trim(input.val()) == "") {
                    select.selectedIndex = 0;
                } else {
                    if (select.find("option:selected").text().toLowerCase() != input.val().toLowerCase()) {
                        select.selectedIndex = 0; 
                    }
                }
            })
        })
        
    })
    //#endregion ComboBox
</script>
